<template>
  <div
    class="infos nav-top mescroll-touch"
    style="width:99%;overflow-y: scroll;margin-top:50px"
    :class="{ active: !brandFold }"
  >
      <div class="trackingBox" v-if="addMychinaeduTracking">
          <div> 
            <div class="trackingBoxTitle" v-if='!scoolTitle'>跟进情况</div>
            <div class="trackingBoxTitle" v-if='scoolTitle'>报备情况</div>
            
            <div class="mescroll">
              <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
                <div v-for="item in dataList">
                  <div :class="{ active: !brandFold }" class="card">
                    <div class="content">
                      <div class="contentUp">
                        <div
                          class="name"
                          v-if="item.hasOwnProperty('isTrackingInfoData')"
                        >
                          <ul>
                            <li>
                              <span>跟进时间：</span>{{ item.trackingDate }}
                            </li>
                            <li>
                              <span>联系人：</span>{{ item.trackingContact }}
                            </li>
                            <li>
                              <span>沟通形式：</span>{{ item.communicationType }}
                            </li>
                            <li>
                              <span>客户类型：</span>{{ item.customerType }}
                            </li>
                            <li>
                              <span>客户进展：</span>{{ item.customerProgress }}
                            </li>
                            <li>
                              <span>沟通内容：</span
                              >{{ item.communicationContent }}
                            </li>
                            <li><span>跟进人：</span>{{ item.creater }}</li>
                            <li>
                              <span>下次跟进时间：</span
                              >{{ item.nextTrackingDate }}
                            </li>
                          </ul>
                        </div>
                        <div
                          class="name"
                          v-if="item.hasOwnProperty('isRecordInfoData')"
                        >
                          <ul>
                            <li>
                              <span>拜访/宴请/参会时间：</span
                              >{{ item.trackingDateStart }}
                            </li>
                            <li><span>报备类别：</span>{{ item.recordType }}</li>
                            <li>
                              <span>跟踪情况：</span>{{ item.recordContent }}
                            </li>
                            <li>
                              <span>下次跟进计划：</span>{{ item.nextPlan }}
                            </li>
                            <li>
                              <span>项目主要障碍：</span
                              >{{ item.majorDifficulty }}
                            </li>
                            <li>
                              <span>需要的支持：</span>{{ item.neededSupport }}
                            </li>
                            <li><span>竞争对手：</span>{{ item.competitor }}</li>
                            <li>
                              <span>预计成交时间：</span
                              >{{ item.expectedClosingDate }}
                            </li>
                            <li>
                              <span>计划招生人数：</span
                              >{{ item.plannedPeopleNum }}
                            </li>
                          </ul>
                        </div>
                      </div>
                      <div class="contentDown">
                        <div class="contentDownList"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </mescroll-vue>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import axios from "axios";
import CardInfo from "../components/CardInfo";
import CardSignInfo from "../components/CardSignInfo";
import CardTracking from "../components/CardTracking";
import CardSchoolInfo from "../components/CardSchoolInfo";
import MescrollVue from "../../../../static/mescroll/mescroll.vue";
import "../../../../static/mescroll/mescroll.min";
// import AddTracking from "../components/AddTracking";
export default {
  name: "TrackingInfo",
  components: {
    CardInfo,
    CardTracking,
    CardSignInfo,
    CardSchoolInfo,
    MescrollVue
  },
  data() {
    return {
      instance: "",
      isRouterAlive: true,
      brandFold: true,
      show: false,
      trackingPeople: Cookies.get("realName"),
      dataList: [],
      investmentInfo_communication_type: [],
      schoolInfo: {},
      cardTrackingData: [],
      pageLoad: false,
      queryName: this.$route.query.name,
      investmentInfo: {},
      addMychinaeduTracking: false,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      //客户基本信息
      addTrackingInfo: {
        investmentInfo: {},
        trackingInfo: {}
      },
      modes: "single",
      submitButtonStats: false,
      brandFold: true,
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback
      },
      dataList: [], // 列表数据
      scoolTitle:false,
      school_recordType_options:[]
    };
  },
  methods: {
    selectDate(mode) {
      this.show = true;
      this.mode = mode;
      this.defaultDate = DEFAULT_DATE[mode];
      this.investmentInfo.nextTrackingDate = "";
    },
    onChange(date) {
      if (this.modes == "single") {
        this.investmentInfo.nextTrackingDate =
          date.format("YYYY-MM-DD") + " 00:00:00"; //如果是某个具体的 mode=single 用这个方法取值
      } else {
        this.investmentInfo.nextTrackingDate = JSON.stringify(
          date.map(item => item.format("YYYY-MM-DD hh:mm:ss"))
        ); //如果是区间 mode=during 用这个方法来遍历
      }
    },
    // 获取下拉
    get_down_list() {
      this.$api.agent.investment_customer_type().then(res => {
        this.chinaeduCustomer_option = res.keyValueList;
      });
      this.$api.agent
        .investmentTrackingTrackTimes({ customerId: this.$route.query.id })
        .then(res => {
          this.investmentTrackingTrackTimes = res.leastTrackTimes;
        });

      this.investmentInfo_communication_type = JSON.parse(
        localStorage.getItem("investmentCommunicationType")
      );
      this.investmentInfo_progress_options = JSON.parse(
        localStorage.getItem("investmentProgress")
      );
      this.investmentInfo_type_options = JSON.parse(
        localStorage.getItem("investmentType")
      );
    },
    // 展开收起
    changeFoldState() {
      this.brandFold = !this.brandFold;
    },
    // 判断是哪个页面过来的
    getPageParams() {
      if (this.queryName == "addMychinaeduTracking") {
        this.addMychinaeduTracking = true;
      }
      if(this.queryName=='addMyXuecooTracking'){
        this.addMychinaeduTracking = true;
      }
      if(this.queryName=='addMySchoolTracking'){
        this.addMychinaeduTracking = true;
        this.scoolTitle=true
      }
    },
    getChinaeduData() {
      // 查询详情用于回显
      

    },
    getSchoolData() {
      // 查询详情
     
      this.$api.school
        .schoolQueryInfo({ id: this.$route.query.id })
        .then(res => {
          this.schoolInfo = res.schoolInfo;
        });
      // 查询报备
      this.$api.school
        .detailRecordInfo(
          {
            id: this.$route.query.id
          },
          this.page
        )
        .then(res => {
          this.recordInfoData = res.trackLists;
          this.recordInfoData.forEach(item => {
            item.isRecordInfoData = "isRecordInfoData";
            school_recordType_options.forEach(j=>{
              if(j.key==item.recordType){
                item.recordType=j.value
              }
            })
            
          });
        
        });
    },
    // mescroll组件初始化的回调,可获取到mescroll对象
    mescrollInit(mescroll) {
      this.mescroll = mescroll; // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback(page, mescroll) {
      // investmentTrackingInfoXuecoo
      // 根据不同的name来渲染不同的接口数据
      if(this.queryName=='addMychinaeduTracking'){
        this.investmentTrackingInfoChinaedu(page, mescroll)
      }
      if(this.queryName=='addMyXuecooTracking'){
        this.investmentTrackingInfoXuecoo(page, mescroll)
      }
      if(this.queryName=='addMySchoolTracking'){
        this.detailRecordInfo(page, mescroll)
      }

    },
    investmentTrackingInfoChinaedu(page, mescroll){
      this.$api.agent
        .investmentTrackingInfoChinaedu({
          customerId: this.$route.query.id,
          pageNum: page.num, // 页码
          pageSize: page.size // 每页长度
        })
        .then(res => {
          this.cardTrackingData = res.investmentTrackingVos;
          this.cardTrackingData.forEach(item => {
            item.isTrackingInfoData = "isTrackingInfoData";
          });
          // 请求的列表数据
          let arr = res.investmentTrackingVos;
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = [];
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        });
    },
    investmentTrackingInfoXuecoo(page, mescroll){
      this.$api.agent
        .investmentTrackingInfoXuecoo({
          customerId: this.$route.query.id,
          pageNum: page.num, // 页码
          pageSize: page.size // 每页长度
        })
        .then(res => {
          this.cardTrackingData = res.investmentTrackingVos;
          this.cardTrackingData.forEach(item => {
            item.isTrackingInfoData = "isTrackingInfoData";
          });
          // 请求的列表数据
          let arr = res.investmentTrackingVos;
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = [];
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        });
    },
    detailRecordInfo(page, mescroll){
      this.school_recordType_options = JSON.parse(
            localStorage.getItem("schoolRecordType")
          );
      this.$api.school
        .detailRecordInfo({
          id: this.$route.query.id,
          pageNum: page.num, // 页码
          pageSize: page.size // 每页长度
        })
        .then(res => {
          this.cardTrackingData = res.trackLists;
          this.cardTrackingData.forEach(item => {
            item.isRecordInfoData = "isRecordInfoData";
            this.school_recordType_options.forEach(j=>{
              if(j.key==item.recordType){
                item.recordType=j.value
              }
            })
          });
          // 请求的列表数据
          let arr = res.trackLists;
          // 如果是第一页需手动置空列表
          if (page.num === 1) this.dataList = [];
          // 把请求到的数据添加到列表
          this.dataList = this.dataList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          this.$nextTick(() => {
            mescroll.endSuccess(arr.length);
          });
        });
    },
    // 提交跟进
    submitData() {
      // 代理商保存跟进
      let addTrackingInfo = Object.assign({}, this.investmentInfo);
      delete this.investmentInfo.signInfo;
      this.addTrackingInfo.trackingInfo = addTrackingInfo;
      this.addTrackingInfo.investmentInfo = this.investmentInfo;
      this.addTrackingInfo.trackingInfo.customerId = this.investmentInfo.id;
      this.submitButtonStats = true;
      this.$api.agent
        .investmentTrackingInfoAdd(this.addTrackingInfo)
        .then(res => {
          if (res.result == 1) {
            this.investmentInfo = {};
            alert(res.msg);
            this.$router.go(-1);
            this.submitButtonStats = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error",
              offset: "40"
            });
            this.submitButtonStats = false;
          }
        });


    }
  },
  mounted() {
    this.getPageParams();
    if (
      this.$route.query.name == "mychinaedu" ||
      this.$route.query.name == "addMychinaeduTracking"
    ) {
      this.getChinaeduData();
      this.get_down_list();
    }
    if (this.$route.query.name == "myschool") {
      this.getSchoolData();
    }
  },
  beforeDestroy(){
    this.mescroll.destroy();
  }

};
</script>

<style scoped lang="scss">
.mescroll {
  height: 580px;
}
.trackingBox{
  .trackingBoxTitle{
    font-size:0.56rem;
    font-family:MicrosoftYaHei-Bold,MicrosoftYaHei;
    font-weight:bold;
    color:rgba(51,51,51,1);
    text-align: center;
    margin-bottom: 20px;
  }
}
.card {
  position: relative;
  .content {
    font-size: 0.34rem;
    .title {
      width: 2.86rem;
      height: 0.81rem;
      line-height: 0.81rem;
      color: #fff;
      font-weight: bold;
      font-size: 0.43rem;
      border-radius: 0px 100px 100px 0px;
    }
    .contentUp {
      display: flex;
      flex-direction: row;
      margin-top: 0.48rem;
      justify-content: space-between;
      .name {
        margin-left: 0.49rem;
        font-size: 0.4rem;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 47px;
        ul {
          padding-left: 0;
          li {
            span {
              color: #cccccc;
            }
            color: #333333;
            font-size: 0.38rem;
            list-style: none;
            height: 0.49rem;
            line-height: 0.49rem;
            margin-top: 0.26rem;
            text-align: left;
          }
        }
      }
    }

    .contentDown {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin-left: 0.4rem;
      .contentDownList {
        display: block;
        margin-bottom: 0.26rem;
        text-align: left;
      }
    }
   
  }
  margin: 0 auto;
  width: 9.2rem; //670px 计算公式 设计稿的px/75
  height: 8.1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 8px 0px rgba(204, 204, 204, 0.5);
  margin-bottom: 0.32rem;
  overflow: hidden;
}
.active {
  height: auto;
  overflow: scroll;
  .content {
    .info {
      top: 40%;
          position: absolute;
    }
  }
}
</style>
